<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<template>
	<view >
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的评价</block>
		</cu-custom>
		<view class="cu-list menu-avatar comment">
			<view class="solid-top padding bg-white margin-bottom-sm" v-for="(item, index) in userAppraises" :key="index">
				<view class="flex align-center">
					<view class="cu-avatar round" :style="'background-image:url(' + item.headimgUrl + ')'">{{!item.headimgUrl ? '头' : ''}}</view>
					<view class="margin-left text-black flex">{{item.nickName ? item.nickName : '匿名'}}
						<view class="text-gray margin-left-sm text-sm">{{item.createTime}}</view>
					</view>
				</view>
				<view class="content padding-tb-sm appraises-list">
					<base-rade :value="item.goodsScore" size="lg"></base-rade>
					<view class="text-black text-content text-sm">{{item.content ? item.content : '此人很懒没写评语'}}</view>
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img margin-top-sm" v-for="(picUrl, index2) in item.picUrls" :key="index2" @click="previewImage([picUrl])">
							<image :src="picUrl" mode='aspectFill'></image>
						</view>
					</view>
					<view class="bg-gray padding-sm radius margin-top-sm text-sm" v-if="item.sellerReply">
						<view class="flex text-sm text-orange">卖家在 {{item.replyTime?item.replyTime:""}} 回复：</view>
						<view class="text-content margin-top-xs">{{item.sellerReply}}</view>
					</view>
					<view class="solid-top margin-top-sm" v-if="item.listGoodsAppraises.length > 0">
						<view class="text-orange text-sm padding-top-sm">在 {{item.listGoodsAppraises[0].createTime}} 追评</view>
						<view class="text-black text-content text-sm margin-top-sm">{{item.listGoodsAppraises[0].content ? item.listGoodsAppraises[0].content : '此人很懒没写评语'}}</view>
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img margin-top-sm" v-for="(picUrl2, index3) in item.listGoodsAppraises[0].picUrls" :key="index3" @click="previewImage([picUrl2])">
								<image :src="picUrl2" mode='aspectFill'></image>
							</view>
						</view>
						<view class="bg-gray padding-sm radius margin-top-sm text-sm" v-if="item.listGoodsAppraises[0].sellerReply">
							<view class="flex text-sm text-orange">卖家在 {{item.listGoodsAppraises[0].replyTime?item.listGoodsAppraises[0].replyTime:""}} 回复：</view>
							<view class="text-content margin-top-xs">{{item.listGoodsAppraises[0].sellerReply}}</view>
						</view>
					</view>
					<navigator hover-class="none" :url="'/pages/order/order-detail/index?id=' + item.orderId"
					class="cu-card bg-gray flex padding-sm align-center margin-top-sm radius">
					    <image class="bg-white radius order-image" :src="item.orderItem.picUrl" mode="aspectFill"></image>
					    <view class="margin-left-sm text-sm goods-information">
							<view class="text-content overflow-2">{{item.orderItem.spuName}}</view>
							<view class="text-gray text-sm overflow-1" v-if="item.specInfo">规格：{{item.specInfo}}</view>
					    </view>
					</navigator>
					<view class="flex justify-end margin-top-sm" v-if="item.listGoodsAppraises.length <= 0">
						<button class="cu-btn round" :class="'bg-'+theme.themeColor" @tap="orderAppraise(item.id,item.orderId)">写追评</button>
					</view>
				</view>
			</view>
		</view>
		<view :class="'cu-load bg-gray ' + (loadmore?'loading':'over')"></view>
	</view>
</template>

<script>
	/**
	 * Copyright (C) 2018-2019
	 * All rights reserved, Designed By www.joolun.com
	 * 注意：
	 * 本软件为www.joolun.com开发研制，未经购买不得使用
	 * 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
	 * 一经发现盗用、分享等行为，将追究法律责任，后果自负
	 */
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					ascs: '',
					//升序字段
					descs: 'create_time'
				},
				parameter: {},
				loadmore: true,
				userAppraises: []
			};
		},

		components: {},
		props: {},

		onLoad(options) {
			// 保存别人分享来的 userCode
			util.saveSharerUserCode(options);
		},

		onShow() {
			app.initPage().then(res => {
				this.loadmore = true;
				this.userAppraises = [];
				this.page.current = 1;
				this.userAppraisesPage();
			});
		},

		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.userAppraisesPage();
			}
		},

		methods: {
			userAppraisesPage() {
				api.userAppraisesPage(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
					let userAppraises = res.data.records;
					this.userAppraises = [...this.userAppraises, ...userAppraises];
					if (userAppraises.length < this.page.size) {
						this.loadmore = false;
					}
				});
			},
			previewImage(picUrl){
				// 预览图片
				uni.previewImage({
					urls: picUrl,
					longPressActions: {
						itemList: picUrl,
						success: function(data) {

						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			orderAppraise(id, orderId) {
				uni.navigateTo({
					url: '/pages/appraises/form/index?orderId=' + orderId + '&parentId=' + id
				});
			}
		}
	};
</script>
<style>
	.order-image{
		width: 120rpx;
		height: 120rpx;
	}

	.appraises-list{
		margin-left: 90rpx;
	}

	.goods-information{
		width: 400rpx;
	}
</style>
